<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>合约管理</el-breadcrumb-item>
        <el-breadcrumb-item>合约数据</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
             <el-row :gutter="25">
              <el-col :span="8">
                  <el-date-picker
                    v-model="dataValue"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="请求开始时间"
                    end-placeholder="请求结束时间"
                    size="small"
                    :picker-options="pickerOptions"
                    @change="initTime"
                    format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
              </el-col>
              <el-col :span="4">
                  <el-select v-model="queryParams.status" filterable clearable placeholder="合同状态" size="small">
                    <el-option
                    v-for="item in statusList"
                    :key="item.id"
                    :label="item.keyDesc"
                    :value="item.value">
                    </el-option>
                </el-select>

              </el-col>
              <el-col :span="2" >
                  <el-button size="small" type="success" @click="queryPage" icon="el-icon-search" v-if="permissionStrValue.indexOf('promisePage:query') !== -1">查询</el-button>
              </el-col>
            </el-row>

            <el-table :data="list" border stripe width="100%">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="合同状态" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.status }}</span>
                </template>
            </el-table-column>
            <el-table-column label="物业地址" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{scope.row.houseTitle}}</span>
                </template>
            </el-table-column>
            <el-table-column label="房源编号" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.houseCode }}</span>
                </template>
            </el-table-column>
            <el-table-column label="业主名称" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.hostName}}</span>
                </template>
            </el-table-column>
            <el-table-column label="客户名称" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.rentUserName}}</span>
                </template>
            </el-table-column>
            <el-table-column label="签约时间" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.createTime}}</span>
                </template>
            </el-table-column>
            <el-table-column label="结束时间" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.endTime}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="250px">
                 <template slot-scope="scope">
                     <el-button type="primary" size="small" @click="infoItem(scope.row.houseId)" icon="el-icon-view" v-if="permissionStrValue.indexOf('promisePage:info') !== -1">房源详情</el-button>
                     <el-button type="danger" size="small" @click="deleteItem(scope.row.id)" icon="el-icon-delete" v-if="permissionStrValue.indexOf('promisePage:delete') !== -1">删除</el-button>
                 </template>
            </el-table-column>
        </el-table>
         <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.currPage"
          :page-sizes="[10,20, 30, 40, 50]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

        </el-card>

        <el-dialog
       title="房源详情"
       :visible.sync="infoFlag"
       width="70%"
       >
       <span style="color:#409EFF">状态：{{info.status}}</span>
       <el-divider></el-divider>
       <span style="color:red;margin-bottom:15px">楼盘信息</span>
       <el-form :model="info" label-width="100px" ref="infoForm" label-position="left" >
         <el-form-item label="楼盘名称" prop="name">
           <el-input v-model="info.estateName" size="small" type="text" style="width:400px" disabled></el-input>
         </el-form-item>
         <el-form-item label="省市区" >
            <el-input v-model="info.province" size="small" type="text" style="width:100px" disabled></el-input>
            <el-input v-model="info.city" size="small" type="text" style="width:100px;margin-left:10px" disabled></el-input>
            <el-input v-model="info.area" size="small" type="text" style="width:100px;margin-left:10px" disabled></el-input>
         </el-form-item>
         <el-form-item label="详细地址" prop="address">
           <el-input v-model="info.address" size="small" style="width:400px"  disabled></el-input>
         </el-form-item>
         <el-row>
            <el-col :span="8">
                <el-form-item label="建筑年代" prop="year">
                <el-input v-model="info.year" size="small" style="width:100px" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="建筑类型" prop="type">
                <el-input v-model="info.type" size="small" style="width:100px" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="物业费" prop="propertyCost">
                <el-input v-model="info.propertyCost" size="small" style="width:100px" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="物业公司" prop="propertyCompany">
                <el-input v-model="info.propertyCompany" size="small" style="width:100px" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="开发商" prop="developers">
                <el-input v-model="info.developers" size="small" style="width:100px" disabled></el-input>
            </el-form-item>
              </el-col>
         </el-row>
         
         <!-- ------------------------------------------房源信息---------------------------------------------- -->
         <el-divider></el-divider>
          <span style="color:red">房源信息</span>

        <el-form-item label="房源标题" prop="title">
            <el-input v-model="info.title" style="width:400px" size="small" disabled ></el-input>
        </el-form-item>
        <el-form-item label="房源编号">
            <el-input v-model="info.code" style="width:400px" size="small" disabled></el-input>
        </el-form-item>
        <el-row>
            <el-col :span="8">
                <el-form-item label="租金" prop="rent">
                    <el-input v-model="info.rent" style="width:200px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="支付方式" prop="paymentMethod">
                <el-input v-model="info.paymentMethod" style="width:200px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="租赁方式" prop="rentMethod">
                    <el-input v-model="info.rentMethod" style="width:200px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="户型" >
                    <el-input v-model="info.houseType" style="width:200px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="建筑面积" prop="coveredArea">
                    <el-input v-model="info.coveredArea" style="width:100px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="使用面积" prop="useArea">
                    <el-input v-model="info.useArea" style="width:100px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="楼层" >
                    <el-input v-model="info.floor" style="width:100px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="朝向" prop="orientation">
                    <el-input v-model="info.orientation" style="width:100px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="装修" prop="decoration">
                <el-input v-model="info.decoration" style="width:100px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="配套设施">
                    <el-input v-model="info.facilities" style="width:400px" size="small" disabled></el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <!-- -------------------------------------图片信息----------------------------------------------- -->
        <el-divider></el-divider>
        <span style="color:red">图片信息</span>
        <el-form-item label="房源描述" prop="houseDesc">
            <el-input v-model="info.houseDesc" style="width:500px" size="small" type="textarea" :rows="5" disabled></el-input>
        </el-form-item>

        <el-form-item label="室内图片">
           <el-image 
                    v-for="(file, index) in info.images" :key="index"
                    style="width: 100px; height: 100px; magrin-left:2px"
                    :src="file" 
                    :preview-src-list="info.images">
                </el-image>
        </el-form-item>

         <!-- -------------------------------------业主信息----------------------------------------------- -->
         <el-divider></el-divider>
         <span style="color:red">业主信息</span>
         <el-form-item label="业主" >
            <el-input v-model="info.constact" style="width:200px" size="small" disabled></el-input>
            <el-input v-model="info.phone" style="width:200px;margin-left:10px;" size="small" disabled></el-input>
        </el-form-item>
        <el-form-item label="委托时间" >
             <el-input v-model="info.createTime" style="width:400px" size="small" disabled></el-input>
        </el-form-item>
        <el-form-item label="看房时间" prop="time">
             <el-input v-model="info.time" style="width:400px" size="small" disabled></el-input>
        </el-form-item>

       </el-form>
       <span slot="footer" class="dialog-footer">
          <el-button @click="infoFlag = false">取 消</el-button>
       </span>

     </el-dialog>

    </div>
</template>

<script>
export default {
    name: 'PromisePage',
    data() {
        return {
            dataValue: '',
            pickerOptions: {
            shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近一个月',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近三个月',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
                }
            }]
            },
            queryParams: {
                timeStart: '',
                timeEnd: '',
                status: '',
                currPage: 1,
                pageSize: 10
            },
            statusList: [],
            list: [],
            total: 0,
            infoFlag: false,
            info: {
                id: '',
                title: '',
                code: '',
                estateId: '',
                estateName: '',
                province: '',
                city: '',
                area: '',
                address: '',
                year: '',
                type: '',
                propertyCost: '',
                propertyCompany: '',
                developers: '',
                buildingNum: '',
                buildingUnit: '',
                buidingFloorNum: '',
                rent: '',
                rentMethod: '',
                paymentMethod: '',
                houseType: '',
                coveredArea: '',
                useArea: '',
                floor: '',
                orientation: '',
                decoration: '',
                facilities: '',
                houseDesc: '',
                constact: '',
                phone: '',
                time: '',
                status: '',
                createTime: '',
                images: [],
            },
            facilitiesArray: [],
            permissionStrValue: ''

        }
    },
    created() {
        this.queryPage();
        this.getStatusList();
        //获取权限值
       this.permissionStrValue = JSON.parse(window.sessionStorage.getItem('permissionList')).toString();
    },
    methods: {
        async queryPage() {
            const{data: res} = await this.$http.post('/house/promise/list-page', JSON.stringify(this.queryParams), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            console.log(res)
            this.list = res.data;
            this.total = res.total;
        },
        initTime(val) {
            if(val !== null) {
               this.queryParams.timeStart = val[0];
               this.queryParams.timeEnd = val[1];
            }
        },
        //合约状态
       async getStatusList() {
            var params = new Object();
            params.pageSize = 100;
            params.currPage = 1;
            params.type = '合约状态';
            const{data: res} = await this.$http.post('/base-data/list-page', JSON.stringify(params), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            console.log(res)
            this.statusList = res.data

        },
         handleSizeChange(newPageSize) {
            this.queryParams.pageSize = newPageSize;
            this.queryPage();
        },
        handleCurrentChange(newPage) {
            this.queryParams.currPage = newPage;
            this.queryPage();

        },
         async getInfo(houseId) {
            const{data: res} = await this.$http.get('/house/resources/get-info-by-id/' + houseId);
            console.log(res)
            if(!res.success) {
                return this.$message.error(res.message);
            }
            this.info = res.data.info;
            this.facilitiesArray = this.info.facilities.split(',');
        },
        infoItem(houseId) {
            this.infoFlag = true;
            this.getInfo(houseId);
        },
        async deleteItem(id) {
            const confirmResult = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => {
                return err;
            });
            //当用户确认时，则返回值为字符串：confirm
            //取消时，返回字符串cancel
            if (confirmResult !== 'confirm'){
                return this.$message.info("已取消删除")
            }
            //发送请求
            const{data: res} = await this.$http.delete('/house/promise/delete-item/' + id);
            if(res.success) {
                this.$message.success("删除成功！");
                this.queryPage();
            } else {
                this.$message.error(res.message);
            }

        }
    }
}
</script>

<style scoped>

</style>